<template>
  <el-dialog :visible.sync="visible" center width="1200px" class="warehouse_audit_dialog" @close="handleCancel">
    <div v-loading="loading">
      <warehouse-order-info :warehouse-order-info="warehouseOrderInfo" :show-parts="showParts" :base-fields="baseFields" :number-desc="numberDesc" />
      <div class="header_title_box mb12">
        <h2>审核意见</h2>
      </div>
      <el-form :ref="formName" :model="warehouseOrderAuditForm" :rules="warehouseOrderAuditRules" label-width="68px">
        <el-form-item label="审核">
          <el-radio v-for="item in auditStatus" :key="item.label" v-model="warehouseOrderAuditForm.audit_status" :label="item.label" class="mr45">{{ item.name }}</el-radio>
        </el-form-item>
        <div v-if="warehouseOrderAuditForm.audit_status === auditStatus[1].label" class="mr30">
          <el-form-item label="意见" prop="audit_notes">
            <el-input v-model="warehouseOrderAuditForm.audit_notes" type="textarea" autosize show-word-limit placeholder="请输入内容" />
          </el-form-item>
        </div>
      </el-form>
      <div class="dialog-footer-center">
        <span>
          <el-button type="primary" :loading="btnLoading" class="ml0" @click="handleSubmit">保存</el-button>
          <el-button class="mr64" @click="handleCancel">取消</el-button>
        </span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import warehouseOrderInfo from './warehouseOrderInfo'
export default {
  name: 'AuditDialog',
  components: {
    warehouseOrderInfo
  },
  props: {
    // 基本信息字段
    baseFields: {
      type: Array,
      default() {
        return []
      }
    },
    // 基本信息字段
    numberDesc: {
      type: Object,
      default() {
        return {}
      }
    },
    // 修改审核 url
    changeAuditUrl: {
      type: String,
      default: ''
    },
    // 详情 url
    infoUrl: {
      type: String,
      default: ''
    },
    // 显示 配件
    showParts: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      id: '', // 入库单id
      warehouseOrderInfo: {}, // 入库单详情
      loading: false,
      formName: 'warehouseOrderAuditForm', // form Name
      warehouseOrderAuditForm: {
        id: '',
        audit_status: '', // 审核状态
        audit_notes: '' // 审核意见
      }, // form
      warehouseOrderAuditRules: {
        audit_notes: [
          { required: true, message: '请输入审核意见', trigger: 'blur' },
          { max: 500, message: '审核意见须在500个字符以内', trigger: 'blur' }
        ]
      }, // rules
      btnLoading: false,
      auditStatus: [{}, {}]
    }
  },
  computed: {},
  methods: {
    // 显示
    show({ id, auditStatus }) {
      const vm = this
      vm.id = id
      vm.auditStatus = auditStatus
      vm.warehouseOrderAuditForm.id = id
      vm.warehouseOrderAuditForm.audit_status = auditStatus[0].label
      vm.visible = true
      vm.loading = true
      vm.getInfo()
    },
    // 入库单详情
    getInfo() {
      const vm = this
      vm.$http.get(`${vm.infoUrl}/${vm.id}`).then((res) => {
        vm.warehouseOrderInfo = res.data
        vm.loading = false
      })
    },
    // 关闭
    handleCancel() {
      const vm = this
      vm.$refs[vm.formName].resetFields()
      vm.visible = false
    },
    // 提交
    handleSubmit() {
      const vm = this
      vm.$refs[vm.formName].validate((valid) => {
        if (valid) {
          vm.btnLoading = true
          vm.$http
            .post(vm.changeAuditUrl, vm.warehouseOrderAuditForm)
            .then((res) => {
              const message =
                vm.warehouseOrderAuditForm.audit_status ===
                vm.auditStatus[0].label
                  ? '已通过'
                  : '已驳回'
              vm.$message.success(message)
              vm.btnLoading = false
              vm.handleCancel()
              vm.$emit('submit')
            })
            .catch(() => {
              vm.btnLoading = false
            })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.warehouse_audit_dialog ::v-deep .el-form-item {
  margin-bottom: 24px;
}
.warehouse_audit_dialog ::v-deep .el-dialog__header {
  padding: 0;
}
.warehouse_audit_dialog ::v-deep .el-dialog__body {
  padding: 16px 16px 14px;
}
</style>
